<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webUploader</title>
    <link rel="stylesheet" href="/statics/common/plugins/webuploader/css/demo.css">
    <script src="/statics/common/plugins/jquery-2.1.0.min.js"></script>
    <script>
        document.domain = "<?php echo $_SERVER['HTTP_HOST'];?>";
    </script>
    <style>
        .filelist li{
            border:3px solid #fff;
            cursor: pointer;
        }
        .filelist li.active{
            border-color: darkorange;
        }
        .tabs {

            width: 100%;
            height: 40px;
            padding-bottom: 1px;
            border-bottom: 1px solid #ccc;
            padding-left: 3px;

        }

        ul{
            padding: 0;
            margin: 0;
        }
        ul li{

            list-style: none;

        }
        .tabs > a{

            color: #333;
            text-decoration: none;
            display: block;
            float: left;
            height: 100%;
            line-height: 40px;
            padding: 0 10px;
            border: 1px solid #ccc;
            margin-right: 5px;
            #border-bottom-color: rgba(0,0,0,0);

        }
        .tabs > a.active{

            border-bottom-color: #fff;

        }
        .tab-content{

            display: none;
            width: 100%;

        }
        .tab-content > ul{

            width:100%;
            height: auto;
            overflow: hidden;
            padding-bottom: 60px;

        }
        .tab-content > .bar{

            height: 60px;
            width: 100%;
            background: #fff;
            position: fixed;
            bottom: 0;
            left: 0;

        }
        .tab-content > .bar .btn{

            background: #00b7ee;
            color: #fff;
            height: 40px;
            padding: 0 20px;
            margin: 10px 20px 0 0;
            cursor: pointer;
            border-radius: 4px;
            float: right;
            line-height: 40px;


        }
        .tab-content > .bar .btn:hover{

            background: #00a2d4;
            
        }
        .tab-content > .bar .btn.disabled{

            opacity: 0.6;
            pointer-events: none;

        }
        .tab-content > ul > li{

            float: left;
            width: 150px;
            height: 150px;
            border: 3px solid #fff;
            cursor: pointer;

        }
        .tab-content  > ul > li > img{

            width: 100%;
            height: 100%;

        }
        .tab-content > ul > li.active{

            border-color: darkorange;

        }
    </style>
</head>
<body>
<div class="tabs">
    <a class="active" href="javascript:;">上传图片</a>
    <a href="javascript:;">在线图片</a>
</div>
<div class="tab-content" style="display: block">
    <div class="wu-example" id="uploader">
        <div class="queueList">
            <div class="placeholder" id="dndArea">
                <div id="filePicker" class="webuploader-container">
                    <div class="webuploader-pick">点击选择图片</div>
                    <div id="rt_rt_1a2ncfjta1ias4sp1sdja7kk31" style="position: absolute; top: 0px; left: 448px; width: 168px; height: 44px; overflow: hidden; bottom: auto; right: auto;">
                        <input type="files" name="files" class="webuploader-element-invisible" multiple="multiple" accept="image/*">
                        <label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255) none repeat scroll 0% 0%;"></label>
                    </div>
                </div>
                <p>或将照片拖到这里，单次最多可选300张</p>
            </div>
            <ul class="filelist"></ul></div>
        <div style="display:none;" class="statusBar">
            <div class="progress" style="display: none;">
                <span class="text">0%</span>
                <span class="percentage" style="width: 0%;"></span>
            </div><div class="info">共0张（0B），已上传0张</div>
            <div class="btns">
                <div id="filePicker2" class="webuploader-container">
                    <div class="webuploader-pick">继续添加</div>
                    <div id="rt_rt_1a2ncfjth18raq3s3tj1ls5it46" style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px; overflow: hidden;">
                        <input type="file" name="upfile" class="webuploader-element-invisible" multiple="multiple" accept="image/*">
                        <label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255) none repeat scroll 0% 0%;"></label>
                    </div>
                </div>
                <div class="uploadBtn state-pedding">开始上传</div>
                <div class="selected disabled">选择</div>
            </div>
        </div>
    </div>
</div>
<div class="tab-content">
    <ul></ul>
    <div class="bar">
        <div class="btn disabled">选择</div>
    </div>
</div>
</body>
<script>//http://files.codeclassroom.com/Upload/index?action=uploadimage&encode=utf-8
    var uploadPath = '<?php echo U("Files/Upload/Index",$param)?>';
    //start=20&size=20&action=listimage


    var page = 1;
    $(function(){

        //选项卡
        $(window).scroll(function(){

            var bot = 50; //bot是底部距离的高度 

            if ((bot + $(window).scrollTop()) >= ($(document).height() - $(window).height())) {

                if($('.tabs > a').eq(1).hasClass('active')){

                    getImageList(page);

                }

            }

        })

        $('.tabs > a').click(function(){

            var index = $(this).index();

            $(this)
                    .addClass('active')
                    .siblings()
                    .removeClass('active');

            $('.tab-content')
                    .hide()
                    .eq(index)
                    .show();

            if(page == 1){
                getImageList(page);
            }
        });

        <?php if($type == 'many'):?>
            $('body'). delegate('li.state-complete','click',function(){
                if(!$(this).hasClass('active')){
                    $(this).addClass('active');
                }else{
                    $(this).removeClass('active');
                }
                if($('li.state-complete.active').length < 1){
                    $('.selected').addClass('disabled');
                }else{
                    $('.selected').removeClass('disabled');
                }
            });
        $('body'). delegate('.tab-content > ul > li','click',function(){
            if(!$(this).hasClass('active')){
                $(this).addClass('active');
            }else{
                $(this).removeClass('active');
            }

            if($('.tab-content > ul > li.active').length < 1){
                $('.btn').addClass('disabled');
            }else{
                $('.btn').removeClass('disabled');
            }
        });
        <?php else:?>
            $('body'). delegate('li.state-complete','click',function(){

                $(this)
                        .addClass('active')
                        .siblings()
                        .removeClass('active');

                $('.selected').removeClass('disabled');

            });
        $('body'). delegate('.tab-content > ul > li','click',function(){

            $(this)
                .addClass('active')
                .siblings()
                .removeClass('active');
            $('.btn').removeClass('disabled');

        });
        <?php endif;?>

        $('.selected').click(function(){
            var obj = {};

            $('li.state-complete.active').each(function(i,v){
                obj[i] = '<?php echo C("IMAGE_CDN")?>'+$(this).data('src');
            });

            if(typeof parent.getImageSrc == 'function')
                parent.getImageSrc(obj);


            parent.layer.closeAll();

        });

        $('.btn').click(function(){
            var obj = [];

            $('.tab-content > ul > li.active').each(function(i,v){
                obj.push('<?php echo C("IMAGE_CDN")?>'+$(this).data('src'));
            });

            if(typeof parent.getImageSrc == 'function')
                parent.getImageSrc(obj);


            parent.layer.closeAll();
        });

    });
    function getImageList(p){

        var p = p ? p : 1 ;

        var nums = 40;

        var start = (p - 1) * nums;

        var requestUrl = "<?php echo U('Files/Upload/index')?>";

        $.ajax({

            type: 'get',
            url : requestUrl,
            dataType: 'json',
            data: {'start':start,'size':nums,'action':'listimage'},
            success:function(data){

                var str = '';

                for(var i in data.list){

                    str += '<li data-src="'+data.list[i].url+'">\
                        <img src="'+ cutUrl(data.list[i].url,150,150) +'" alt="">\
                        </li>\
                        ';


                }
                $('.tab-content > ul').append(str);

                page ++;


            }

        })

    }
    function cutUrl(url,width,height){

        var d = '_' + width + '_' + height;

        if(url.indexOf(d) < 0){

            var idx = url.lastIndexOf('.');
            url = url.substr(0,idx) + d + url.substr(idx);

        }

        return url;

    }
</script>
<script src="/statics/common/plugins/webuploader/webuploader/webuploader.js"></script>
<script src="/statics/common/plugins/webuploader/js/upload.js"></script>
</html>